<template>
    <div>
        <comp ref="bar" :params="params" height="300px" width="100%" />
    </div>
</template>
<script>
import comp from "./../bar/index";
export default {
    name: "test",
    title: "双y轴",
    components: { comp },
    theme: "black",
    data() {
        return {
            params: {},
            dataCols: {
                dimension: ["日期"],
                legend: {
                    data: ["类型1", "类型3", "类型2"],
                },
                series: [
                    {
                        日期: "1-1",
                        类型1: 10,
                        类型2: "20",
                        类型3: "40",
                    },
                    {
                        日期: "1-2",
                        类型1: 11,
                        类型2: "21",
                        类型3: "41",
                    },
                    {
                        日期: "1-3",
                        类型1: 12,
                        类型2: "22",
                        类型3: "42",
                    },
                    {
                        日期: "1-4",
                        类型1: 13,
                        类型2: "23",
                        类型3: "43",
                    },
                    {
                        日期: "1-5",
                        类型1: 90,
                        类型2: "24",
                        类型3: "144",
                    },
                    {
                        日期: "1-6",
                        类型1: 13,
                        类型2: "23",
                        类型3: "0.43",
                    },
                    {
                        日期: "1-7",
                        类型1: 90,
                        类型2: "24",
                        类型3: "44",
                    },
                    {
                        日期: "1-8",
                        类型1: 90,
                        类型2: "24",
                        类型3: "44",
                    },
                    {
                        日期: "1-9",
                        类型1: 90,
                        类型2: "24",
                        类型3: "44",
                    },
                    {
                        日期: "1-10",
                        类型1: 12,
                        类型2: "22",
                        类型3: "42",
                    },
                    {
                        日期: "1-11",
                        类型1: 13,
                        类型2: "23",
                        类型3: "43",
                    },
                    {
                        日期: "1-12",
                        类型1: 90,
                        类型2: "24",
                        类型3: "144",
                    },
                    {
                        日期: "1-13",
                        类型1: 13,
                        类型2: "23",
                        类型3: "43",
                    },
                    {
                        日期: "1-14",
                        类型1: 90,
                        类型2: "24",
                        类型3: "44",
                    },
                ],
            },
            setting: {
                dimension: ["日期"],
                grid: {},
                legend: {},
                xAxis: {
                    axisLabel: {
                        rotate: "45",
                    },
                },
                yAxis: {
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: true,
                    },
                    类型2: {
                        type: "precent",
                    },
                },
                yAxisName: ["个", "率"],
                yAxisType: ["number", "percent"], //如果需要双y轴并且右边也要显示%，请配置两个值在这里；
                series: {
                    ySiteRight: ["类型2"], //配置第二条y轴
                    barWidth: "",
                    showLine: ["类型2"],
                    linear: {
                        类型1: ["#0B4EC3", "#138CEB"],
                        类型2: ["#f30", "#f60"],
                    },
                    showBackground: false, //背景配置
                    itemStyle: {}, //柱子自定义样式
                    barBorderRadius: [0], // 柱子弧度
                    label: {
                        //坐标轴
                        show: false,
                    },
                },
                color: [],
            },
        };
    },
    mounted() {
        this.$nextTick(() => {
            let param = {
                dataCols: this.dataCols,
                setting: this.setting,
            };
            this.params = { ...param };
            //this.$refs.bar.initChart(param);
        });
    },
};
</script>